<template>
  <div class="EntrepreneurshipService">
    <section class  ="content-section">
      <div class="container">
        <div v-for="item in items" :key="item.title" class="grid-item">
          <a class="card">
            <div class="card-content">
              <h6 class="card-title">{{ $t(`entrepreneurshipService.${item.title}`) }}</h6>
              <div class="module-container">
                <div v-for="module in item.modules" :key="module.text"
                     class="module-item"
                     :class="{ 'clickable': canNavigate(module.text) }"
                     @click="handleClick(module.text)">
                  <img :src="require(`@/assets/icon/${module.icon}`)" alt="Module Icon" class="module-icon">
                  <p class="module-text">{{ $t(`entrepreneurshipService.${module.text}`) }}</p>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>

    <a-modal
        v-model:visible="isModalVisible"
        title="温馨提示"
        @ok="handleOk"
        @cancel="handleCancel"
        ok-text="确定"
        cancel-text="取消"
    >
      使用当前功能需要先登录
    </a-modal>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue';

export default {
  name: 'EntrepreneurshipService',
  components: {
    AModal: Modal
  },
  data() {
    return {
      items: [
        {
          title: 'incubationService',
          modules: [
            { text: 'businessRegistration', icon: 'icon1.png' },
            { text: 'entrepreneurshipTraining', icon: 'icon2.png' },
            { text: 'businessPlan', icon: 'icon3.png' },
            { text: 'expertReview', icon: 'icon4.png' },
            { text: 'industryAssociation', icon: 'icon5.png' }
          ]
        },
        {
          title: 'accelerationService',
          modules: [
            { text: 'baseSettlement', icon: 'icon6.png' },
            { text: 'investmentConsulting', icon: 'icon7.png' },
            { text: 'complianceManagement', icon: 'icon8.png' },
            { text: 'enterpriseManagement', icon: 'icon9.png' },
            { text: 'internationalCommunication', icon: 'icon10.png' }
          ]
        },
        {
          title: 'marketService',
          modules: [
            { text: 'brandBuilding', icon: 'icon11.png' },
            { text: 'academicPromotion', icon: 'icon12.png' },
            { text: 'clinicalResearch', icon: 'icon13.png' },
            { text: 'channelSales', icon: 'icon14.png' },
            { text: 'marketResearch', icon: 'icon15.png' }
          ]
        }
      ],
      isModalVisible: false,
      targetRoute: ''
    };
  },
  methods: {
    handleClick(moduleText) {
      const currentRoute = this.$route.path;

      if (currentRoute === '/EntrepreneurshipServiceView') {
        if (moduleText === 'baseSettlement' || moduleText === 'investmentConsulting') {
          this.targetRoute = moduleText === 'baseSettlement' ? '/GlobalBasesView/islogin' : '/IndustryThinkTankView/islogin';
          this.isModalVisible = true;
        }
      } else if (currentRoute === '/EntrepreneurshipServiceView/islogin') {
        if (moduleText === 'baseSettlement') {
          this.$router.push('/GlobalBasesView/islogin');
        } else if (moduleText === 'investmentConsulting') {
          this.$router.push('/IndustryThinkTankView/islogin');
        }
      }
    },
    canNavigate(moduleText) {
      return moduleText === 'baseSettlement' || moduleText === 'investmentConsulting';
    },
    handleOk() {
      window.location.href = 'https://cschain.cn/test/index/';
      this.isModalVisible = false;
    },
    handleCancel() {
      this.isModalVisible = false;
    }
  }
};
</script>

<style scoped>
.EntrepreneurshipService {
  font-family: Arial, sans-serif;
}

.container {
  margin-left: 10vw;
  margin-right: 10vw;
}

.grid-item {
  display: flex;
  flex-direction: column;
  width: 70vw;
  height: 30vh;
}

.card {
  display: block;
  position: relative;
  width: 77vw;
  border-radius: 0.5rem;
  border: 1px solid #ddd;
  background: linear-gradient(to left, #e6f4ff, #b7e4ff, #c0defd);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  text-decoration: none;
  padding: 2rem;
  overflow: hidden;
  transition: background-color 0.3s ease; /* 为 card 添加平滑的背景颜色过渡 */
}

.card-content {
  display: flex;
  align-items: flex-start; /* 垂直对齐 */
  justify-content: space-between; /* 确保内容在两边对齐 */
  gap: 7rem; /* 添加间距 */
  height: 15vh;
}

.card-title {
  margin-top: 5vh;
  margin-left: 1.5vw;
  font-size: 1.8vw;
  font-weight: 800;
  position: relative; /* 为伪元素定位提供参考 */
  font-family: "STSong", "华文中宋", serif;
}

.card-title::after {
  content: '';
  display: block;
  height: 5px; /* 线条的高度 */
  background-color: #80bfff; /* 蓝色线条的颜色 */
  width: 110%; /* 线条宽度稍微长于标题 */
  position: absolute;
  left: -5%; /* 线条左边稍微超出标题 */
  border-radius: 1em;
}

.module-container {
  display: flex;
  flex-wrap: nowrap; /* 不换行 */
  gap: 1rem; /* 模块之间的间距 */
  flex: 1; /* 使模块容器占据剩余的水平空间 */
}

.module-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* 每个模块平分容器宽度 */
  transition: background-color 0.3s ease, transform 0.3s ease; /* 平滑的背景颜色和放大动效 */
  border-radius: 0.5rem;
  margin-top: 1%;
}

.module-item:hover {
  transform: scale(1.15); /* 鼠标悬停时放大模块 */
}

.module-item.clickable {
  cursor: pointer; /* 可点击模块的光标样式 */
}

.module-icon {
  width: 3.5vw; /* 设置图标宽度 */
  height: 7.5vh; /* 设置图标高度 */
}

.module-text {
  margin-top: 5%;
  font-size: 1.1vw;
  text-align: center;
  font-weight: 500;
  font-family: "STSong", "华文中宋", serif;
}

.content-section {
  padding-top: 2rem;
}

</style>
